<template>
  <div class="evaluate_score">
    <!-- 保密提示 -->
    <div class="confidentiality-criteria">
      <div class="confidentiality_tips">此次考核的评分，评分过程和结果严格保密！</div>
      <div class="criteria" @click="lookCriteria">查看评分标准</div>
    </div>
    <!-- <el-scrollbar class="table-con"> -->
    <div class="scrollbar-con">
      <template v-if="lenderUserList.length > 0">
        <div class="table-title">
          领导成员评价
          <span>(单击列表进行编辑)</span>
        </div>
        <vxe-table
          class="tables"
          ref="xTables"
          width="100%"
          height="30%"
          border
          resizable
          size="medium"
          stripe
          highlight-hover-row
          align="center"
          :data="lenderUserList"
          :edit-config="{ trigger: 'click', mode: 'row', activeMethod: activeRowMethod }"
          @cell-click="cellClick">
          <vxe-column type="seq" title="序号" width="60" fixed="left"></vxe-column>
          <vxe-column field="userName" title="人员" width="80" fixed="left" :edit-render="{}">
            <template #default="{ row }">
              <span :class="['status', statusClass(row.status)]" v-if="row.status != 3"></span>
              <span>{{ row.userName }}</span>
            </template>
            <template #edit="{ row }">
              <span :class="['status', statusClass(row.status)]" v-if="row.status != 3"></span>
              <span>{{ row.userName }}</span>
            </template>
          </vxe-column>
          <!-- <vxe-column field="peopleAssessScore" title="民主测评" width="100">
            <template #default="{ row }">
              <span>{{ row.peopleAssessScore }}*{{ (row.isLeaderMain === 1 && row.isOneLeader === 0) || row.isMainLead === 1 ? '50' : '40' }}%</span>
            </template>
          </vxe-column> -->
          <vxe-column field="calcScore" title="加分与扣分" width="100">
            <template #default="{ row }">
              <span>{{ row.calcScore }}</span>
              <i class="el-icon-info" @click.stop="clickCalc(row)"></i>
            </template>
          </vxe-column>
          <vxe-column field="mainLeaderAssessScore" title="*主要领导评分" :edit-render="{}" width="120">
            <template #edit="{ row }">
              <vxe-input
                v-model="row.mainLeaderAssessScore"
                type="number"
                placeholder="请评分"
                min="0"
                max="100"
                @change="updateEstimateTotalScore(row)"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column
            field="mainLeaderAssessRank"
            title="建议等次"
            :edit-render="{}"
            width="100"
            v-if="lenderUserRankFlag">
            <template #default="{ row }">
              <span v-if="row.needAssessRank == 0">-</span>
              <span v-else>{{ formatSex(row.mainLeaderAssessRank) }}</span>
            </template>
            <template #edit="{ row }">
              <vxe-select v-model="row.mainLeaderAssessRank" v-if="row.needAssessRank == 1">
                <vxe-option
                  v-for="item in dataReasonList"
                  :key="item.reasonID"
                  :value="item.reasonID"
                  :label="item.label"></vxe-option>
              </vxe-select>
            </template>
          </vxe-column>

          <vxe-column
            field="scoringExpressionVO.expression"
            title="承担极难险重任务情况"
            min-width="200"
            :edit-render="{}">
            <template #header>
              <div class="title-center">
                <span>承担极难险重任务情况</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现"
                  placement="top">
                  <i class="icon vxe-icon--question"></i>
                </el-tooltip>
              </div>
            </template>
            <template #edit="{ row }">
              <vxe-textarea
                v-model="row.scoringExpressionVO.expression"
                size="small"
                resize="both"
                class="textarea"></vxe-textarea>
            </template>
          </vxe-column>
          <vxe-column field="scoringSuggestVO.suggestion" title="领导点评" min-width="200" :edit-render="{}">
            <template #header>
              <div class="title-center">
                <span>领导点评</span>
                <el-tooltip class="item" effect="dark" content="打分高于95分或低于70分时，需要填写说明" placement="top">
                  <i class="icon vxe-icon--question"></i>
                </el-tooltip>
              </div>
            </template>
            <template #edit="{ row }">
              <vxe-textarea
                v-model="row.scoringSuggestVO.suggestion"
                size="small"
                resize="both"
                class="textarea"></vxe-textarea>
            </template>
          </vxe-column>

          <vxe-column field="estimateTotalScore" title="总分预估" width="100" fixed="right" sortable>
            <template #default="{ row }">
              <!-- <span class="score-num">{{ totalScore(row) }}</span> -->
              <span class="score-num">{{ row.estimateTotalScore || totalScore(row) }}</span>
              分
            </template>
          </vxe-column>
        </vxe-table>
      </template>

      <div class="table-title">
        非领导成员评价
        <span>(单击列表进行编辑)</span>
      </div>

      <vxe-table
        class="tables"
        ref="xTables"
        width="100%"
        :height="lenderUserList.length > 0 ? '53%' : '90%'"
        border
        resizable
        size="medium"
        stripe
        highlight-hover-row
        align="center"
        :data="commonUserList"
        :edit-config="{ trigger: 'click', mode: 'row', activeMethod: activeRowMethod }"
        @cell-click="commonCellClick">
        <vxe-column type="seq" title="序号" width="60" fixed="left"></vxe-column>
        <vxe-column field="userName" title="人员" width="80" fixed="left" :edit-render="{}">
          <template #default="{ row }">
            <span :class="['status', statusClass(row.status)]" v-if="row.status != 3"></span>
            <span>{{ row.userName }}</span>
          </template>
          <template #edit="{ row }">
            <span :class="['status', statusClass(row.status)]" v-if="row.status != 3"></span>
            <span>{{ row.userName }}</span>
          </template>
        </vxe-column>
        <vxe-column title="分管领导评分" width="160" :edit-render="{}">
          <template #default="{ row }">
            <span>
              {{ row.leaderAssessScore }}*80%
              <span v-if="row.leaderAssessRank">(等次:{{ formatSex(row.leaderAssessRank) }})</span>
            </span>
          </template>
          <template #edit="{ row }">
            <span>
              {{ row.leaderAssessScore }}*80%
              <span v-if="row.leaderAssessRank">(等次:{{ formatSex(row.leaderAssessRank) }})</span>
            </span>
          </template>
        </vxe-column>
        <!-- <vxe-column field="peopleAssessScore" title="民主测评" width="100" :edit-render="{}">
          <template #default="{ row }">
            <span>{{ row.peopleAssessScore }}*40%</span>
          </template>
          <template #edit="{ row }">
            <span>{{ row.peopleAssessScore }}*40%</span>
          </template>
        </vxe-column> -->
        <vxe-column field="calcScore" title="加分与扣分" width="100">
          <template #default="{ row }">
            <span>{{ row.calcScore }}</span>
            <i class="el-icon-info" @click.stop="clickCalc(row)"></i>
          </template>
        </vxe-column>
        <vxe-column field="mainLeaderAssessScore" title="*主要领导评分" :edit-render="{}" width="120">
          <template #edit="{ row }">
            <vxe-input
              v-model="row.mainLeaderAssessScore"
              type="number"
              placeholder="请评分"
              min="0"
              max="100"
              @change="updateEstimateTotalScore(row)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="mainLeaderAssessRank"
          title="建议等次"
          :edit-render="{}"
          width="100"
          v-if="commonUserRankFlag">
          <template #default="{ row }">
            <span v-if="row.needAssessRank == 0">-</span>
            <span v-else>{{ formatSex(row.mainLeaderAssessRank) }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.mainLeaderAssessRank" v-if="row.needAssessRank == 1">
              <vxe-option
                v-for="item in dataReasonList"
                :key="item.reasonID"
                :value="item.reasonID"
                :label="item.label"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>

        <vxe-column
          field="scoringExpressionVO.expression"
          title="承担极难险重任务情况"
          min-width="200"
          :edit-render="{}">
          <template #header>
            <div class="title-center">
              <span>承担极难险重任务情况</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现"
                placement="top">
                <i class="icon vxe-icon--question"></i>
              </el-tooltip>
            </div>
          </template>
          <template #edit="{ row }">
            <vxe-textarea
              v-model="row.scoringExpressionVO.expression"
              size="small"
              resize="both"
              class="textarea"></vxe-textarea>
          </template>
        </vxe-column>
        <vxe-column field="scoringSuggestVO.suggestion" title="领导点评" min-width="200" :edit-render="{}">
          <template #header>
            <div class="title-center">
              <span>领导点评</span>
              <el-tooltip class="item" effect="dark" content="打分高于95分或低于70分时，需要填写说明" placement="top">
                <i class="icon vxe-icon--question"></i>
              </el-tooltip>
            </div>
          </template>
          <template #edit="{ row }">
            <vxe-textarea
              v-model="row.scoringSuggestVO.suggestion"
              size="small"
              resize="both"
              class="textarea"></vxe-textarea>
          </template>
        </vxe-column>

        <vxe-column field="estimateTotalScore" title="总分预估" width="100" fixed="right" sortable>
          <template #default="{ row }">
            <!-- <span class="score-num">{{ totalScore(row) }}</span> -->
            <span class="score-num">{{ row.estimateTotalScore || totalScore(row) }}</span>
            分
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <!-- </el-scrollbar> -->
    <ScoringCriteria :criteriaShow="criteriaShow" @close="closeCriteria" />
    <ClacScoreDialog ref="clacScoreDialog" :addSubList="addSubList" />
  </div>
</template>

<script>
import ScoringCriteria from './ScoringCriteria.vue'
import ClacScoreDialog from './calcScoreDialog.vue'
import { getCalcScoreByUserId } from '@apis/evaluation.js'
export default {
  name: 'EvaluateTable',
  components: { ScoringCriteria, ClacScoreDialog },
  props: {
    activeUser: {
      type: Object,
      default: () => {
        return {}
      },
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dataReasonList: [
        { label: '好', reasonID: '1' },
        { label: '较好', reasonID: '2' },
        { label: '一般', reasonID: '3' },
        { label: '较差', reasonID: '4' },
      ],
      // 评分标准显示隐藏
      criteriaShow: false,
      // 分管领导是否是主要领导
      lenderUserList: [],
      commonUserList: [],
      lenderUserRankFlag: false,
      commonUserRankFlag: false,
      addSubList: [],
    }
  },
  computed: {},
  watch: {
    dataList() {
      this.handelDataList()
    },
  },
  created() {},
  mounted() {
    this.handelDataList()
  },
  methods: {
    // 处理数据（是否能催报，以及分管领导是否是主要领导）
    handelDataList() {
      const lenderData = []
      const commonData = []
      this.dataList.forEach(item => {
        if (item.isLeaderAssessDataResponseVOS) {
          lenderData.push(item)
        } else {
          commonData.push(item)
        }
      })

      this.lenderUserList = lenderData
      this.commonUserList = commonData
      for (let i = 0; i < lenderData.length; i++) {
        if (lenderData[i].needAssessRank === 1) {
          this.lenderUserRankFlag = true
          break
        }
      }
      for (let i = 0; i < commonData.length; i++) {
        if (commonData[i].needAssessRank === 1) {
          this.commonUserRankFlag = true
          break
        }
      }
    },
    // 查看评分标准
    lookCriteria() {
      this.criteriaShow = true
    },
    // 关闭评分标准
    closeCriteria() {
      this.criteriaShow = false
    },
    // 显示等次
    formatSex(value) {
      const obj = this.dataReasonList.find(item => item.reasonID === value)
      if (obj && obj.label) {
        return obj.label
      } else {
        return ''
      }
    },
    updateEstimateTotalScore(row) {
      /**
       * isLeaderMain:0 上级领导不是主要领导 1上级领导是主要领导
       * isOneLeader:0 有多个分管领导 1 只有一个领导(按照6 4)
       */
      return (row.estimateTotalScore =
        (row.leaderAssessScore * 0.8 + row.calcScore * 1 + row.mainLeaderAssessScore * 0.2).toFixed(1) * 1)
      // if (row.isLeaderMain === 0 && row.isOneLeader === 0) {
      //   row.estimateTotalScore =
      //     (
      //       row.leaderAssessScore * 0.4 +
      //       row.peopleAssessScore * 0.4 +
      //       row.calcScore * 1 +
      //       row.mainLeaderAssessScore * 0.2
      //     ).toFixed(1) * 1
      // } else if ((row.isLeaderMain === 1 && row.isOneLeader === 0) || row.isMainLead === 1) {
      //   row.estimateTotalScore =
      //     (row.mainLeaderAssessScore * 0.5 + row.peopleAssessScore * 0.5 + row.calcScore * 1).toFixed(1) * 1
      // } else if (/* row.isLeaderMain === 1 && */ row.isOneLeader === 1) {
      //   row.estimateTotalScore =
      //     (row.mainLeaderAssessScore * 0.6 + row.peopleAssessScore * 0.4 + row.calcScore * 1).toFixed(1) * 1
      // }
    },
    // 总分预估
    totalScore(row) {
      return (row.estimateTotalScore =
        (row.leaderAssessScore * 0.8 + row.calcScore * 1 + row.mainLeaderAssessScore * 0.2).toFixed(1) * 1)
      // 有分管领导
      // if (row.isLeaderMain === 0 && row.isOneLeader === 0) {
      //   row.estimateTotalScore =
      //     (
      //       row.leaderAssessScore * 0.4 +
      //       row.peopleAssessScore * 0.4 +
      //       row.calcScore * 1 +
      //       row.mainLeaderAssessScore * 0.2
      //     ).toFixed(1) * 1 || 0

      //   // return
      // } else if (/* row.isLeaderMain === 1 && */ row.isOneLeader === 1) {
      //   // 有分管领导和主要领导是一个人
      //   row.estimateTotalScore =
      //     (row.mainLeaderAssessScore * 0.6 + row.peopleAssessScore * 0.4 + row.calcScore * 1).toFixed(1) * 1 || 0
      // } else if ((row.isLeaderMain === 1 && row.isOneLeader === 0) || row.isMainLead === 1) {
      //   // 有分管领导和主要领导是一个人
      //   row.estimateTotalScore =
      //     (row.mainLeaderAssessScore * 0.5 + row.peopleAssessScore * 0.5 + row.calcScore * 1).toFixed(1) * 1 || 0
      // }
    },
    // 获取修改的数组
    getUpdateEvent() {
      const $table = this.$refs.xTables
      const updateRecords = $table.getUpdateRecords()
      console.log(updateRecords, 'updateRecordsupdateRecords')
    },
    // 设置是否扣编辑
    activeRowMethod({ row, rowIndex }) {
      return row.status !== 3
    },
    cellClick({ row, rowIndex }) {
      if (row.status === '0' || this.activeUser.userId === row.userId) {
        return false
      } else {
        this.$emit('setActivePeople', rowIndex)
      }
    },
    commonCellClick({ row, rowIndex }) {
      if (row.status === '0' || this.activeUser.userId === row.userId) {
        return false
      } else {
        this.$emit('setActivePeople', this.lenderUserList.length + rowIndex)
      }
    },
    statusClass(status) {
      // 2为已评分，1为待评分，0为未小结
      let className = ''
      switch (status * 1) {
        case 1:
          className = 'not_reviewed'
          break
        case 2:
          className = 'reviewed'
          break
        default:
          break
      }
      return className
    },
    clickCalc(row) {
      getCalcScoreByUserId({
        needId: this.$route.query.needId,
        userId: row.userId,
      }).then(res => {
        if (res.status === 200) {
          this.addSubList = res.data
          if (this.addSubList.length > 0) {
            this.$refs.clacScoreDialog.calcDetailShow = true
          } else {
            this.$message.info('该成员暂无加分与扣分数据')
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.evaluate_score {
  height: 100%;
  width: 100%;
  /deep/ .vxe-header--column .vxe-cell--edit-icon {
    display: none;
  }
  .title-center {
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      cursor: pointer;
      font-size: 14px;
      padding-left: 3px;
      margin-left: 3px;
    }
  }
  .table-title {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0;
    span {
      color: #999;
      font-weight: 400;
      font-size: 12px;
    }
  }

  .confidentiality-criteria {
    height: 50px;
    background-color: #e9eff48f;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 保密提示
    .confidentiality_tips {
      color: #a30014;
      font-size: 14px;
      text-align: center;
    }
    .criteria {
      cursor: pointer;
    }
  }
  // .table-con {
  height: calc(100% - 60px);
  .scrollbar-con {
    padding: 0 10px 10px;
    height: 100%;
  }
  .textarea {
    margin: 5px 0;
  }
  .score-num {
    color: #a30014;
  }

  .status {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 3px;
    &.reviewed {
      background-color: #488c3c;
    }
    &.not_reviewed {
      background-color: #950002;
    }
    &.not_commit {
      background-color: #ccc;
    }
  }
  // }
  .el-icon-info {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #999;
    cursor: pointer;
    font-size: 18px;
  }
}
</style>
